<!DOCTYPE html>
<html>
<head>
	<title>小鹿项目-小鹿线</title></title>
	<link rel="stylesheet" href="css/swiper-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/curriculum.css">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>


<div class="header">
	<div class="nav">
		<div class="wrap u-clearfix">
			<h1 class='u-l'><img src="images/pic_logo.png"></h1>
			<ul class='u-r u-clearfix'>
				<li><a href="index.html">首 页</a></li>
				<li><a href="">学习路线</a></li>
				<li class='active'><a href="curriculum.html">在线课程</a></li>
				<li><a href="product.html">产品中心</a></li>
				<li><a href="student.html">成功就业</a></li>
				<li><a href="about.html">关于我们</a></li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<img src="images/pic_background_class.png">
	</div>

	<div class='curriculum'>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper u-clearfix" id='swiperWrapper'>
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
</div>

<script src='js/swiper-bundle.min.js'></script>
<script src='js/jquery-1.11.min.js'></script>
<script>
$(function(){
	var sCurriculum = '';
	//请求课程列表数据
	$.ajax({
		url:"http://39.101.217.150:8075/course/list",
		data:{
			page:1,
			size:12
		},
		success:function(data){
			var records = data.data.records;
			$.each(records,function(index,item){
				sCurriculum+=`<div class="swiper-slide">
					<h2 class='title'>${item.name}</h2>
					<p class="explain">${item.contentName}</p>
					<p class='author'>讲师：${item.teacher}</p>
					<p class='time'>课程时间：${item.courseTime}</p>
					<p class='introduce'>${item.courseContent}</p>
					<a href='${item.courseUrl}' target='_blank'>
						<div class='study'></div>
					</a>
				</div>`;
			})
			$('#swiperWrapper').append(sCurriculum);
			//swiper部分
			var swiper = new Swiper('.swiper-container', {
				loop:true,
				slidesPerView: 4,
				spaceBetween: 30,
				effect : 'coverflow',
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});
		}
	})
})
</script>
</body>
</html>